@import "tailwindcss";

/* 引入iconify图标插件 */
@plugin "@iconify/tailwind4";


@layer components {

  body {
    @apply text-xs
  }

  #app {
    @apply flex flex-col items-center justify-center h-screen w-screen
  }

  input {
    @apply p-3 w-full outline-none border-none
  }

  .input-box {
    @apply inline-flex items-center border-2 border-slate-200 rounded transition-all
  }

  .input-box:focus-within {
    @apply border-violet-500
  }

  .btn {
    @apply w-full p-3 inline-flex items-center justify-center gap-1 ring-2 ring-slate-200 rounded shadow transition-all
  }

  .btn-primary {
    @apply bg-violet-500 text-white cursor-pointer hover:ring-violet-500 hover:bg-violet-500/30
  }

  .btn-default {
    @apply text-slate-600 cursor-pointer hover:text-violet-500 hover:bg-violet-500/30
  }

  .tips {
    @apply w-full p-2 inline-flex items-center gap-2 bg-slate-500/10 text-slate-500 rounded
  }

  .tips-success {
    @apply bg-sky-500/10 text-sky-500
  }

  .tips-info {
    @apply bg-emerald-500/10 text-emerald-500
  }

  .tips-warning {
    @apply bg-orange-500/10 text-orange-500
  }

  .tips-error {
    @apply bg-red-500/10 text-red-500
  }
}